<template>
	<view class="page" v-if="data.coupon_list!=undefined">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
	    <view class="body after-navber">
	        <view class="info">
	            <view class="info-list" style="width:100%;">
	                <view class="info-one" v-if="coupon.discount_type==2" v-for="coupon of data.coupon_list" :key="coupon.id">
	                    <image :src="data.__wxapp_img.coupon.enabled.url" v-if="coupon.is_receive==0"></image>
	                    <image :src="data.__wxapp_img.coupon.disabled.url" v-if="coupon.is_receive==1"></image>
	                    <view class="info-content flex-row flex-x-center flex-y-center fs-b">
	                        <navigator class="info-content flex-row flex-x-center flex-y-center" openType="navigate" :url="'/pages/coupon-detail/coupon-detail?coupon_id='+coupon.id">
	                            <view class="flex-grow-0">
	                                <view class="flex-row flex-y-bottom">
	                                    <view class="flex-grow-0">￥</view>
	                                    <view class="flex-grow-1" style="font-size:23pt;">{{coupon.sub_price}}</view>
	                                </view>
	                            </view>
	                            <view class="flex-grow-1">
	                                <view style="margin-left:16upx;">
	                                    <view style="margin-bottom:4upx;">优惠券</view>
	                                    <view>满{{coupon.min_price}}可用</view>
	                                </view>
	                            </view>
	                        </navigator>
	                        <view class="flex-grow-0">
	                            <view @click="receive" class="flex-x-center flex-y-center info-btn fs-sm" :data-index="coupon.id" style="color:#ff4544;" v-if="coupon.is_receive==0">立即领取</view>
	                            <view class="flex-x-center flex-y-center info-btn fs-sm" style="color:#999;" v-if="coupon.is_receive==1">已领取</view>
	                        </view>
	                    </view>
	                    <view class="info-footer fs-sm">
	                        <view class="info-day" v-if="coupon.expire_type==2">有效日期：{{coupon.begintime}}-{{coupon.endtime}}</view>
	                        <view class="info-day" v-if="coupon.expire_type==1">有效日期：领取{{coupon.expire_day}}天内有效</view>
	                        <view>
	                            <view @click="goodsList" :data-goods="coupon.goods" v-if="coupon.appoint_type==2&&coupon.goods.length>0">指定商品使用 点进去查看指定商品</view>
	                            <view v-else>{{coupon.content}}</view>
	                        </view>
	                    </view>
	                </view>
	            </view>
	            <view class="flex-x-center" v-if="data.coupon_list.length<=0">
	                <text style="margin-top:50upx;">暂无优惠券</text>
	            </view>
	        </view>
	    </view>
	    <comp-footer v-bind="{data:data}"></comp-footer>
			<get-coupon v-bind="{data:data}" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox"></get-coupon>
	</view>
	
</template>

<script>var myVue = {};
	import getCoupon from '../../components/get-coupon/get-coupon.vue'
	export default {
		components:{getCoupon},
		data(){
			return{
				data:{}
			}
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var t = this;
        myVue.getApp.core.showLoading({
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.default.coupon_list,
            success: function(e) {
                0 == e.code && t.setData({
                    coupon_list: e.data.list
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		methods:{
			receive: function(t) {
        var e = this, o = t.target.dataset.index;
        myVue.getApp.core.showLoading({
            mask: !0
        }), e.hideGetCoupon || (e.hideGetCoupon = function(t) {
            var o = t.currentTarget.dataset.url || !1;
            e.setData({
                get_coupon_list: null
            }), o && myVue.getApp.core.navigateTo({
                url: o
            });
        }), myVue.getApp.request({
            url: myVue.getApp.api.coupon.receive,
            data: {
                id: o
            },
            success: function(t) {
                0 == t.code && e.setData({
                    get_coupon_list: t.data.list,
                    coupon_list: t.data.coupon_list
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    closeCouponBox: function(t) {
        this.setData({
            get_coupon_list: ""
        });
    },
    goodsList: function(t) {
        var e = t.currentTarget.dataset.goods, o = [];
        for (var a in e) o.push(e[a].id);
        myVue.getApp.core.navigateTo({
            url: "/pages/list/list?goods_id=" + o
        });
    }
		}
	}
</script>

<style scoped>
	.page /deep/ .info {
	    padding: 20upx;
	    width: 100%;
	}
	
	.page /deep/ .info-one {
	    position: relative;
	    width: 100%;
	    margin-bottom: 20upx;
	    z-index: 10;
	}
	
	.page /deep/ .info-one image {
	    width: 100%;
	    height: 160upx;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 0;
	}
	
	.page /deep/ .info-content {
	    height: 160upx;
	    width: 100%;
	    color: #fff;
	    padding: 0 24upx;
	    line-height: 1;
	    position: relative;
	}
	
	.page /deep/ .info-btn {
	    background-color: #fff;
	    width: 160upx;
	    height: 56upx;
	    border-radius: 28upx;
	}
	
	.page /deep/ .info-footer {
	    background-color: #fff;
	    padding: 24upx 24upx 32upx 24upx;
	    border-radius: 0 0 16upx 16upx;
	    border: 1upx solid #cfcfcf;
	    border-top: none;
	    color: #666;
	}

</style>